<script setup lang='ts'>
import { h, onMounted, render } from 'vue';
//  创建虚拟dom并显示:两步
//  1.创建虚拟dom  createVNode() => h()      //react: react.createElement()
//  2.挂载真实dom节点  render() 渲染
//  -------------------------------------------
//  creageVNode() 或 h()
//  三个参数  
//  参数1:虚拟dom节点类型    div img  a /  组件    虚拟dom本质就是一个js对象
//  参数2:虚拟dom节点属性
//  参数3:虚拟dom节点内容  字符串,也可以是数组
// <h1 id="h1Id" class="box">我是h1标签</h1>
// const vNode =h('h1',{id:'h1Id',className:'box'},'我是h1标签')
const son1= h('span',{},'123')
const son2= h('span',{},'abc')
const vNode =h('h1',{id:'h1Id',className:'box'},[son1,son2])
// render函数: 两个参数:
// 1.虚拟dom
// 2.虚拟dom的挂载点
onMounted(()=>{
    render(vNode,document.querySelector('.container')!)
})
   
</script>

<template>
    <div class="container">
        <!-- <h1 id="h1Id" class="box">我是h1标签</h1> -->

        <!-- 
            <h1 id="h1Id" class="box">
                <span>123</span>
                <span>abc</span>
            </h1> 
        -->
    </div>
</template>

<style scoped>

</style>
